<template>

    <button @click="changeNode">修改节点颜色事件</button>

    <h2>添加箭头连线</h2>

    <div id="chart-diagram" style="background-color: whitesmoke; width: 1000px; height: 1000px;">
    </div>


</template>

<script setup>
    import {onMounted} from 'vue';
    import go from "gojs";

    let myDiagram = null;


    const changeNode = () => {
        var data = myDiagram.model.findNodeDataForKey("Delta");
        // 这个方式可以更新
        if (data !== null) myDiagram.model.setDataProperty(data, "color", "red");
    }

    const init = () => {

        const $ = go.GraphObject.make

        myDiagram = new go.Diagram("chart-diagram", {
            'grid.visible': true, // 显示网格
            'clickCreatingTool.archetypeNodeData': {category: 'Normal', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；；
            'toolManager.hoverDelay': 100, // tooltip提示显示延时
            'toolManager.toolTipDuration': 10000, // tooltip持续显示时间
            allowMove: true, // 允许拖动画板
            allowDragOut: true, // 允许拖拽节点
            allowDelete: true, // 允许删除节点
            allowCopy: true, // 允许复制节点
            allowClipboard: true, // 允许粘贴节点

        });

        myDiagram.nodeTemplate =
            $(go.Node, "Auto",
                {},

                $(go.Shape, {
                    fill: "yellow",//定义锚点颜色
                    figure: "RoundedRectangle",
                    width: 80,
                    height: 40,
                    alignment: go.Spot.Top, //规定锚点的位置
                    portId: "topSpot", //规定锚点的名称
                    fromSpot: go.Spot.TopSide, //输出点
                    fromLinkable: true,//是否可以输出
                    toSpot: go.Spot.TopSide, //输入点
                    toLinkable: true, //是否可以输入
                    cursor: "pointer",
                    mouseEnter: function (e, port) {
                        if (!e.diagram.isReadOnly) {
                            port.fill = "rgba(255,0,255,0.5)";

                        }

                    },
                    mouseLeave: function (e, port) {


                        port.fill = "yellow";

                    }
                }, new go.Binding("fill", "color")),

                $(go.TextBlock,
                    {margin: 5},
                    new go.Binding("text", "key"))  // // 把数组中的key值绑定到TextBlock的text上
            );

        var nodeDataArray = [
            {key: "Alpha1", color: "lightblue"},  // 这边的值会被遍历循环
            {key: "Beta1", color: "pink"},  // 这边的值会被遍历循环
            {key: "node3", color: "yellow"}
        ];
        var linkDataArray = [
            {from: "Alpha1", to: "Beta1"},
            {from: "Alpha1", to: "node3"},
        ];
        myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
    };

    onMounted(() => {
        init();
    });


</script>

<style scoped>

</style>